<template>
  <div class="wrap">
    <div class="header">
      <div class="logo">
        <img src="@/assets/logo.png" alt="">
      </div>
      <div class="other" @click="gohome()">
        進入首頁
      </div>
    </div>
    <div class="main">
      <!-- <img src="../../assets/loginBimg.png" alt=""> -->
      <div class="login">
        <div class="login_parent">
          <div class="please">會員賬號登錄</div>
          <div class="phone">
            <div>手機號碼</div>
            <input
              class="input-user"
              v-model="loginForm.username"
              placeholder="請輸入電話號碼"
              maxlength="16"
              type="text"
              autocomplete="off"
            />
          </div>
          <div class="password">
            <div>密碼</div>
            <input
              class="input-password"
              v-model="loginForm.password"
              type="password"
              placeholder="請輸入密碼"
              maxlength="16"
              show-password
              @keyup.enter="getuser"
            />
          </div>
          <div class="forget">
            <div @click="goforget">忘記密碼？</div>
            <div @click="goregist">立即註冊</div>
          </div>
          <div class="submit">
            <div @click="getuser">登錄</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {validatePhoneTwo,validateEMail,validatePassword,validateReferral,validateXing,validateMonth,validateDay} from '@/utils/validate';
import {login} from '@/api/login';
import {userInfo} from '@/api/user';
import { getToken, setToken, removeToken ,setOnly} from '@/utils/auth'
export default {
  name: 'Login',
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    }
  },
  methods: {
    
    getuser(){
      if(this.loginForm.password==''){
        this.$message('請輸入密碼');
      }else{
      login({psw:this.loginForm.password,username:this.loginForm.username}).then(response => {
        // console.log(response)
        if (response.errno == 0) {
          setToken(response.data.userId);
          this.getuser2()
          // setOnly("JSESSIONID="+response.data.jsessionid)
          // console.log(response)
          this.$router.replace({ path: '/home',query:{
            sta:1
          } })
        }else{
          this.$message({
            type: 'error',
            message: response.errmsg
          })
        }
        sessionStorage.setItem('menu',0)
        })
      }
    },
    getuser2(){
      userInfo({userId:getToken()}).then(response => {
        console.log(response)
        if(response.errno == 0){
          sessionStorage.setItem('name',response.data.surname+response.data.username)
          if(response.data.userLevel < 2){
            this.levelShow = false
          }else{
            this.levelShow = true
          }
        }else{
        
        }
      })
    },
    goforget(){
      this.$router.push({path:'/forget'})
    },
    gohome(){
      sessionStorage.setItem('menu',0)
      this.$router.push({path:'/home',query:{sta:1}})
    },
    goregist(){
      this.$router.push({path:'/regist'})
    }
  }
}
</script>
<style type="text/css" scoped>
.wrap{
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
.header{
  width: 100%;
  height: 100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  
  overflow: hidden;
  padding: 0 100px;
  color: #fff;
  background: #be795a;
}
.logo img{
  width: 191px;
}
.other{
  cursor: pointer;
  font-size: 25px;
} 
.main{
  width: 100%;
  height: 840px;
  overflow-y: hidden;
  box-sizing: border-box;
  background-size: cover;
  background-image: url('../../assets/loginBimg.png');
}
.main>img{
  width: 100%;
  height: 840px;
  object-fit: cover;
}

.login{
    width: 100%;
    /* min-height: 1100px; */
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.login_parent {
  position: absolute;
  right: 5%;
  width: 520px;
  height: 601px;
  background: #FFFFFF;
  border-radius: 30px;
  top: 190px;
}

.please{
  padding-top:46px;
  padding-left:52px;
  font-size: 30px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: #333333;
}
.phone{
    width: 80%;
    padding:10px 20px;
    margin: 0 auto;
    color: #000;
    margin-bottom:10px;
    margin-top:18px;
    border:1px solid #fff;
    
}
/* .phone:hover{
    width: 80%;
    padding:15px 20px;
    margin: 0 auto;
    height: 80px;
    color: #000;
    margin-bottom:15px;
    margin-top:15px;
    border:1px solid #BE9A67;
} */
.input{
    background: none !important;
}
.phone div{
  font-size: 24px;
  padding-left:2px;
}
.password div{
  font-size: 24px;
  margin-bottom:16px;
}
.input-user {
    width: 96%;
    border: none;
    margin: 0 auto;
    padding:0 10px;
    margin-top:16px;
    outline: none;
    color: #000;
    font-size: 18px;
    height: 72px;
    background: #FFF8C5;
}
.password{
    width: 80%;
    padding:15px 20px;
    margin: 0 auto;
    color: #000;
    border:1px solid #fff;
}
/* .password:hover{
    width: 80%;
    padding:15px 20px;
    margin: 0 auto;
    height: 80px;
    color: #000;
    border:1px solid #BE9A67;
} */
 .input-password {
    width: 96%;
    padding:0 10px;
    border: none;
    margin-top:16px;
    margin: 0 auto;
    outline: none;
    color: #000;
    font-size: 18px;
    height: 72px;
    background: #FFF8C5;
}
.submit{
    width: 90%;
    height: 150px;
    align-items: center;
    margin: 0 auto;
    justify-content: space-around;
    display: flex;
}
.submit>div:nth-child(1){
    width: 422px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #BE9A67;
    border-radius: 10px;
    font-size: 24px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #FFFFFF;
    cursor: pointer;

}
.forget{
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}
.forget>div:nth-child(1){
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 34px;
    cursor: pointer;
}
.forget>div:nth-child(2){
    display: flex;
    align-items: center;
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 34px;
    cursor: pointer;
}
</style>
